<template>
    <div class="body">
        <!-- 用户评价 -->
        <div class="myorder p tbv" v-if="JSON.stringify(discussInfo) != '{}'">
            <div class="content30" v-show="disType == 1">
                <a href="javascript:void(0)">
                    <div class="order">
                        <div class="fl">
                            <span class="firde"
                                >用户评价<b class="yasan-ajdas"
                                    >({{ discussInfo.count }})</b
                                ></span
                            >
                        </div>
                        <div class="fr">
                            <span class="deta_eva" @click="navChangefn(2)"
                                >好评&nbsp;<i
                                    >{{ discussInfo.high_rate }}%</i
                                ></span
                            >
                            <i class="Mright" style="margin-top: 0.47rem"></i>
                        </div>
                    </div>
                </a>
            </div>
            <!--评论列表-s-->
            <div class="xq_details pl-list01">
                <div
                    class="spxq-ggcs comment_de p gizle sabit"
                    v-show="disType == 0"
                >
                    <ul>
                        <!--1 全部 2好评 3 中评 4差评-->
                        <li
                            class="pj-list"
                            :class="{ red: disNav == 1 }"
                            @click="changeDissfn(1)"
                        >
                            全部评价({{ discussInfo.comment_num.total_sum }})
                        </li>
                        <li
                            class="pj-list"
                            :class="{ red: disNav == 2 }"
                            @click="changeDissfn(2)"
                        >
                            好评({{ discussInfo.comment_num.high_sum }})
                        </li>
                        <li
                            class="pj-list"
                            :class="{ red: disNav == 3 }"
                            @click="changeDissfn(3)"
                        >
                            中评({{ discussInfo.comment_num.center_sum }})
                        </li>
                        <li
                            class="pj-list"
                            :class="{ red: disNav == 4 }"
                            @click="changeDissfn(4)"
                        >
                            差评({{ discussInfo.comment_num.low_sum }})
                        </li>
                    </ul>
                </div>

                <!--评论列表-->
                <div class="tab-con-wrapper my_comment_list">
                    <div class="assess-flat" id="comList">
                        <span
                            class="assess-wrapper"
                            v-for="(item, index) in discussData"
                            :key="index"
                        >
                            <div class="assess-top">
                                <span class="user-portrait"
                                    ><img src="../../assets/images/user68.jpg"
                                /></span>
                                <span class="user-name">{{
                                    item.username
                                }}</span>
                                <span class="comment-item-star">
                                    <span
                                        class="real-star comment-stars-width5"
                                    ></span>
                                </span>
                                <span class="assess-date">{{
                                    item.add_time
                                }}</span>
                                <p class="assess-content">
                                    {{ item.content }}
                                </p>
                            </div>
                            <div class="assess-bottom">
                                <div
                                    class="product-img-module"
                                    v-show="item.img"
                                >
                                    <ul class="jd-slider-container gallery">
                                        <li
                                            v-for="(imgli, i) in item.img"
                                            :key="i"
                                            class="
                                                jd-slider-item
                                                product-imgs-li
                                            "
                                        >
                                            <dd>
                                                <img
                                                    :src="imgli"
                                                    width="100px"
                                                    heigth="100px"
                                                />
                                            </dd>
                                        </li>
                                    </ul>
                                    <!-- </a> -->
                                </div>
                                <!--商家回复-s-->
                                <p
                                    class="pay-date"
                                    v-for="(textli, j) in item.reply_list"
                                    :key="j"
                                >
                                    商家回复：{{ textli.content }}
                                </p>
                                <!--商家回复-e-->
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    props: ['disType'],
    data() {
        return {
            discussData: [], // 评价列表
            discussInfo: {}, // 评价数据

            disNav: 1,
        };
    },
    computed: {},
    mounted() {
        this.getDiscussData(2);
    },
    methods: {
        navChangefn() {
            this.$emit('navChangefn', true);
        },
        changeDissfn(id) {
            this.disNav = id;
            this.discussData = [];
            this.getDiscussData(id);
        },
        // 获取评论列表
        getDiscussData(comment_type) {
            axiosPost(
                '/api/goods/comment_list',
                {
                    goods_id: this.$route.query.id,
                    comment_type: comment_type,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // this.discussInfo.count = res.data.count;
                    // this.discussInfo.high_rate = res.data.high_rate;

                    // 加工评价列表数据
                    const add0 = (m) => {
                        return m < 10 ? '0' + m : m;
                    };
                    this.discussData = [];
                    res.data.comment_list.forEach((item) => {
                        const time = new Date(
                            Number(String(item.add_time) + '000')
                        );
                        const y = time.getFullYear();
                        const m = time.getMonth() + 1;
                        const d = time.getDate();
                        item.add_time = y + '-' + add0(m) + '-' + add0(d);
                        item.reply_list = res.data.reply_list[item.comment_id];
                        this.discussData.push(item);
                    });
                    this.discussInfo = res.data;
                }
            );
        },
    },
};
</script>

<style lang="less" scope></style>
